<template>
  <div class="oe-ruleManage" v-loading="loading">
      <top-tip :batchTitle="batchTitle" :examTitle="examTitle"></top-tip>
      <div class="oe-rule-content">
          <div class="oe-manage-search">
              <span class="oe-manage-text"></span>
              <span class="oe-manage-input">
                  <a-input-search :allowClear="true" @pressEnter="getStuAnswerDetails()" @search="getStuAnswerDetails()" v-model="searchStuName" placeholder="输入姓名或者学号查询" />
              </span>
              <span class="oe-manage-btns">
                  <a-button type="primary" @click.stop="getStuAnswerDetails()">查询</a-button>
                  <a-button type="primary">
                      <a :href="exportUrl">导出成绩</a>
                  </a-button>
              </span>
          </div>
          <div class="oe-manage-contain">
              <a-table :columns="modalColumns" :dataSource="modalList" :rowSelection="modalSelection" :pagination="modalPagination" :scroll="{ y: 470 }" @change="onModalChange">
                  <span slot="Action" slot-scope="record">
                      <a-tooltip placement="bottom" title="查看详情" v-if='record.StateNum != 0'>
                          <span class="iconfont icon-chakan" style="color:#1890ff;cursor: pointer;" @click.stop="showMember(record)"></span>
                      </a-tooltip>
                  </span>
              </a-table>
          </div>
      </div>
  </div>
</template>

<script>
import topTip from '@/components/top-tip/index.vue';
import GetOperationList from '@/lib/mixin/methods.js';
export default {
    name: 'dataAnalysis',
    mixins: [GetOperationList],
    components: {
        topTip
    },
    data() {
        return {
            
            searchStuName: '',
            //数据详情
            stuAnswerList: [],
            // 分页配置
            modalPagination: {
                pageSizeOptions: ['10', '20', '50', '100', '1000'],
                showSizeChanger: true,
                showTotal(total) {
                    return `共 ${total} 条`;
                },
                onShowSizeChange: (current, pageSize) => {
                    this.modalPagination.current = current;
                    this.modalPagination.pageSize = pageSize;
                },
                onChange: (current, pageSize) => {
                    this.modalPagination.current = current;
                    this.modalPagination.pageSize = pageSize;
                },
                buildOptionText(props) {
                    return props.value + '条/页';
                },
                current: 1,
                pageSize: 10,
                total: 0
            },
            modalColumns: [{
                    title: '序号',
                    dataIndex: 'number',
                    key: 'number'
                },
                {
                    title: '姓名',
                    dataIndex: 'DisplayName',
                    key: 'DisplayName',
                    sorter: true
                },
                {
                    title: '学号',
                    dataIndex: 'UserNo',
                    key: 'UserNo',
                    sorter: true
                },
                {
                    title: '作答试卷',
                    dataIndex: 'WorkExamStruct',
                    key: 'WorkExamStruct',
                    sorter: true
                },
                {
                    title: '成绩',
                    dataIndex: 'GetScore',
                    key: 'GetScore',
                    sorter: true
                },
                {
                    title: '开始时间',
                    dataIndex: 'DateCreated',
                    key: 'DateCreated',
                    width: '15%',
                    sorter: true
                },
                {
                    title: '提交时间',
                    dataIndex: 'SubmitCreated',
                    key: 'SubmitCreated',
                    width: '15%',
                    sorter: true
                },
                {
                    title: '时长',
                    dataIndex: 'UseTime',
                    key: 'UseTime',
                    sorter: true
                },
                {
                    title: '切屏次数',
                    dataIndex: 'CutPageCount',
                    key: 'CutPageCount',
                    sorter: true
                },
                {
                    title: '摄像头异常次数',
                    dataIndex: 'CameraCutPageCount',
                    key: 'CameraCutPageCount',
                    sorter: true
                },
                {
                    title: '状态',
                    dataIndex: 'State',
                    key: 'State'
                },
                {
                    title: '备注',
                    dataIndex: 'InvalidReason',
                    key: 'InvalidReason'
                },
                {
                    title: '操作',
                    key: 'Action',
                    scopedSlots: {
                        customRender: 'Action'
                    },
                    align: 'center'
                }
            ],
            modalList: [],
            examTitle:'',
            batchTitle:'',
        };
    },
    props: {
        examid: {
            type: String,
            default: ''
        }
    },
    mounted(){
      this.getStuAnswerDetails();
      this.getOperation()
    },
    methods: {
        getOperation() {
          this.loading = true;
          this.GetOperationList('examId',this.examid).then((rst) => {
            this.loading = false;
            if (rst.code === 1) {
              this.examTitle = rst.examTitle
              this.batchTitle = rst.batchTitle
            } else {
              this.$message.error(rst.msg);
            }
          });
        },
        //数据统计详情
        getStuAnswerDetails(current, pageSize, sort) {
            this.loading = true;
            var that = this;
            this.exportUrl = '/api/examStatistics/ExamAnaly/getStuAnswerDetails?export=1&examId=' + this.examid;
            this.$http
                .post('/api/examStatistics/ExamAnaly/getStuAnswerDetails', {
                    examId: this.examid,
                    sort,
                    pageSize: pageSize || 10,
                    page: current || 1,
                    searchStuName: this.searchStuName
                })
                .then((rst) => {
                    this.loading = false;
                    if (rst.code > 0) {
                        this.stuAnswerList = rst.list;

                        this.modalList = [];
                        this.modalPagination.current = rst.pagination.pageIndex;
                        this.modalPagination.pageSize = rst.pagination.pageSize;
                        this.modalPagination.total = rst.pagination.totalCount;
                        if (rst.list.length) {
                            rst.list.forEach((item, index) => {
                                let number = (rst.pagination.pageIndex - 1) * rst.pagination.pageSize + index + 1;
                                this.modalList.push({
                                    ...item,
                                    number: number
                                });
                            });
                        }
                    } else {
                        that.$message.warning(rst.msg);
                    }
                });
        },
        // 点击table排序
        onModalChange(pagenation, filter, sort) {
            let sortOrder = '';
            if (sort.order) {
                if (sort.order == 'ascend') {
                    sortOrder = sort.columnKey;
                } else if (sort.order == 'descend') {
                    sortOrder = '-' + sort.columnKey;
                } else {
                    sortOrder = '';
                }
            }

            this.getStuAnswerDetails(pagenation.current, pagenation.pageSize, sortOrder);
        },

        showMember(r) {
        let newPage =  this.$router.resolve({
                name: 'studentExamDetailOne',
                params: {
                    examid: this.examid,
                    stuid: r.UserId,
                    type:r.StateNum
                }
            });
             window.open(newPage.href, '_blank');
        }
    },
};
</script>
